<template>
	<div class="contents">
		<van-nav-bar
		  title="设计师入住表"
		  left-text="返回"
		  left-arrow
		  @click-left="onClickLeft"
		/>
		<div class="content">
			<section class="degpd">
				<van-row>
					<van-col span="24">
						<h4>1.您的身份是</h4>
						<van-checkbox-group v-model="result">
							<van-checkbox
								v-for="(item, index) in list"
								:key="item"
								:name="item"
								class="degcheck"
							>
								{{ item }}
							</van-checkbox>
						</van-checkbox-group>
					</van-col>
				</van-row>
			</section>
			<section class="degpd degborder">
				<van-row>
					<van-col span="24">
						<h4>2.姓名</h4>
						<input type="text" placeholder="请和身份证上姓名一致" class="degcard"/>
					</van-col>
				</van-row>
			</section>
			<section class="degpd degborder">
				<van-row>
					<van-col span="24">
						<h4>3.性别</h4>
						<van-radio-group v-model="radio" class="degcheck">
							<van-radio name="1">男</van-radio>
							<van-radio name="2">女</van-radio>
							<van-radio name="3">其他</van-radio>
						</van-radio-group>
					</van-col>
				</van-row>
			</section>
			<section class="degpd degborder">
				<van-row>
					<van-col span="24">
						<h4>4.联系方式</h4>
						<input type="text" placeholder="优乐家居房主将通过这个号码联系你" class="degcard"/>
					</van-col>
				</van-row>
			</section>
			<section class="degpd degborder">
				<van-row>
					<van-col span="24">
						<h4>5.微信</h4>
						<input type="text" placeholder="优乐家居房主将通过这个微信号联系你" class="degcard"/>
					</van-col>
				</van-row>
			</section>
			<section class="degpd degborder">
				<van-row>
					<van-col span="24">
						<h4>6.简介</h4>
						<textarea placeholder="有设计室的请写明设计室名称/荣誉/理念等内容,140字以内,(给内容将显示在设计室主页)" class="degdesc"/>
					</van-col>
				</van-row>
			</section>
			<section class="degpd degborder">
				<van-row>
					<van-col span="24">
						<h4>7.城市所在</h4>
						<van-button type="default" @click="showcity">选择城市</van-button>
						<van-area :area-list="areaList" value="110101" v-show="showarea"/>
					</van-col>
				</van-row>
			</section>
			<section class="degpd degborder">
				<van-row>
					<van-col span="24">
						<h4>8.服务地区</h4>
						<van-button type="default" @click="showcity">服务地区</van-button>
						<van-area :area-list="areaList" value="110101" v-show="showarea"/>
					</van-col>
				</van-row>
				<van-button class="loginoutbtn" block>提交申请</van-button>
			</section>
		</div>
	</div>
</template>

<script>
import Vue from 'vue'
import { Row, Col, Cell, CellGroup, NavBar, Button, Checkbox, CheckboxGroup, Radio, RadioGroup, Area} from 'vant'
Vue.use(Row).use(Col).use(Cell).use(CellGroup).use(NavBar).use(Button).use(Checkbox).use(CheckboxGroup).use(Radio).use(RadioGroup).use(Area)

export default {
	data () {
		return {
      list: ['设计机构/公司', '在设计机构工作的设计师', '独立自由设计师', '其他'],
      result: ['a', 'b'],
			radio: '1',
			showarea: false,
			areaList:{
				province_list: {
					110000: '北京市',
					120000: '天津市'
				},
				city_list: {
					110100: '北京市',
					110200: '县',
					120100: '天津市',
					120200: '县'
				},
				county_list: {
					110101: '东城区',
					110102: '西城区',
					110105: '朝阳区',
					110106: '丰台区',
					120101: '和平区',
					120102: '河东区',
					120103: '河西区',
					120104: '南开区',
					120105: '河北区'
				}
			}
		}
	},
	methods: {
		onClickLeft () {
			this.$router.go(-1)
		},
		showcity () {
			this.showarea = true
		}
	}
}
</script>

<style lang="scss" scoped="scoped">
@import '@/lib/reset.scss';
.degpd {
	padding: 0 .1rem;
	margin-top: .1rem;
}
.degcheck {
	line-height: .3rem;
}
.degborder {
	@include border(0 0 1px 0, #ccc, solid, null);
	padding-bottom: .05rem;
}
.degcard {
	width: 100%;
	border: none;
	outline: none;
}
.degdesc {
	width: 100%;
	height: 1rem;
}
.loginoutbtn {
	margin-top: .5rem;
	@include border(1px, #696f80, solid, null)
	color: #696f80;
}
</style>
